<%@ page language="java" pageEncoding="UTF-8"%>
	<%@include file="/views/common/include/taglib.jsp"%>
	<link type="text/css" rel="stylesheet" href="${ctx}/css/dlifestyle/role.css" />
	<link type="text/css" rel="stylesheet" href="${ctx }/css/dlifestyle/admin.css" source="widget" />
	<script src="${ctx}/js/controllers/system/role/RoleListController.js" type="text/javascript"></script>
	<script type="text/javascript">
		var ctx = '${ctx}';
		setCtx(ctx);
	</script>
          <section class="scrollable padder">
              <div style="height:40px;line-height: 40px;">
                    <div class="forword_area"></div>
					<div class="location">当前位置：${sessionScope.currcent_position}</div>

              </div>
              <hr>
              <section class="panel-default">
                <aside class="roleaside">
					<section>
						<header class="roleheader">
							<div style="height:50px;">
								<p class="" style="float:left;line-height: 50px;margin-left: 20px;"><b>所有角色</b></p>
								<img src="${ctx }/images/tables/roleadd.png" style="margin-top:14px;float:right;cursor: pointer;margin-right: 10px;" width="22px;" height="23px" onclick="toggleAddRole();">
							</div>
						</header>
						<section class="roleContent">
							<div class="role">
								<ul style="list-style: none;">
								<c:forEach items="${roles }" var="r" varStatus="item">
									<div class="div-li <c:if test="${r.id == role.id}">div-li-select</c:if>">
										<div class ="rolediv">
											<li onclick="toggleRole('${r.id}');">${r.roleName}</li>
										</div>
									</div>
								</c:forEach>
								</ul>
							</div>
							<div id="editrole" style="display:none;min-height:180px">
									<input type="hidden"value="${role.id}" id="oid"/>
									<input type="hidden"value="${role.roleName}" id="oname"/>
									<input type="hidden"value="${role.descrip}" id="odesc"/>
									<input type="hidden"value="${role.roleType}" id="otype"/>
									<input type="hidden"value="${role.isAllCell}" id="oall"/>
									<div class="item">
										<input type="text" maxlength="10" value="${role.roleName }" id="roleName"
											class="editform-control" style="margin-left: 8%;" placeholder="输入角色名">
									</div>
									<div class="item">
										<input type="text" maxlength="20" value="${role.descrip}" id="descrip" class="editform-control" style="margin-left: 8%;"
											placeholder="输入角色描述">
									</div>
									<div class="item">
										<div class="fl" >
											<select id="roleType"" style="height:27px;width:175px;" class="editform-control">  
					                  			<option value="">--角色类型--</option> 
					                  			<c:forEach items="${roleTypes}" var="item" varStatus="status">
					                  				<c:if test="${item.value == role.roleType}">
						                  				<option id="${item.value}" value="${item.value}" selected>
						                  					${item.label}
						                  				</option>
					                  				</c:if>
					                  				<c:if test="${item.value != role.roleType}">
						                  				<option id="${item.value}" value="${item.value}">
						                  					${item.label}
						                  				</option>
					                  				</c:if>
					                  			</c:forEach>
					              			</select>
										</div>
									</div>
									<label style="float:left;height:40px;line-height: 40px;">所有小区：</label>
									<div style="height:80px;">
											<input id="isAllCell1" name="isAllCell" type="radio" value="1"  onclick="hideCell();"
		 										 <c:if test="${role.isAllCell == 1 }">checked = "checked"</c:if>/>
												<label for="isAllCell1" class="">是</label>
									
										
											<input id="isAllCell0" name="isAllCell" type="radio" value="0" onclick="showCell();"
												<c:if test="${role.isAllCell == 0 }">checked = "checked"</c:if>/>
												<label for="isAllCell0" class="">否</label>
										
										<div id="showCell">
												<button type="button" class="btn-success"  style="min-width:60px;margin-left:80px;" onclick="chooseCell('${role.id}');">选择小区</button>
										</div>
									</div>
									<input id="selectedCellId" type="hidden" value="">					
									<div class="form-group" style="margin-left:20px;">
										<button type="button" class="btn-success"  style="min-width:60px;" onclick="editRole();">保存</button>
										<button type="button" onclick="closeEdit();" class="btn-cancel" style="margin-left:10px;min-width:60px;">取消</button>
									</div>
							</div>
						</section>
					</section>
				</aside>
				<section class="rightaside">
				
				<header class="rightheader">
					<a class="rolebtn-group" style="color:white;background:#28C7C9;height:31px;" onclick="setRoleMenu('${role.id}' , '${role.roleName}');">
						<span style="height:31px;vertical-align:middle"><img style="margin-top:-8px;" src="${ctx}/images/table/rolemenu.png" /></span>功能权限</a> 
					<%-- <a class="rolebtn-group" style="color:white;background:#28C7C9;" onclick="setRoleButton(${role.id} , '${role.roleName}');">
						<span style="height:31px;vertical-align:middle"><img style="margin-top:-8px;" src="${ctx}/images/table/rolebutton.png"/></span>按钮权限</a>  --%>
						
					<a class="rolebtn-group" style="color:white;background:#28C7C9;" onclick="toggleEditRole('${role.id}');">
						<span style="height:31px;vertical-align:middle"><img style="margin-top:-8px;" src="${ctx}/images/table/erole.png"/></span>编辑角色</a>
						
					<a class="rolebtn-group" style="color:white;background:#f8856e;" onclick="deleteRoleMenu('${role.id}' , '${role.roleName}');" id="a1">
						<span style="height:31px;vertical-align:middle;"><img style="margin-top:-8px;" src="${ctx}/images/tables/roledel_pink.png"/></span>删除角色</a>
				</header>
				
					<!--begin table表格 -->
                <div class="table-responsive">
                <table class="table table-striped b-t b-light">
                    <thead>
                      <tr>
                        <th width="5%">序号</th>
                        <th width="15%">菜单名</th>
                        <th width="15%">本地地址</th>
                      </tr>
                    </thead>
                    <tbody id="tableTbody">
                      	<c:forEach items="${roleMenu}" var="menuVo" varStatus="menuStatus">
	                      <tr onmouseover="mouseoverOne(this)" onmouseout="mouseoutOne(this)">
	                        <td>${menuStatus.index + 1 }</td>
	                        <td>${menuVo.menuName}</td>
	                        <td>${menuVo.locationURL}</td>
	                      </tr>
                      	</c:forEach>
                    </tbody>               
                  </table>
                  
                </div>
				
				</section>
                
              </section>
            </section>
    <%@include file="/views/common/footer.jsp"%>
	<script type="text/javascript">
	$("#a1").hover(function(){
		$(this).children().children().attr("src","${ctx}/images/tables/roledel_red.png");
        $(this).css("background","#ff4824");
	},function(){
		$(this).children().children().attr("src","${ctx}/images/tables/roledel_pink.png");
        $(this).css("background","#f8856e");
	});
	
    
    function hideCell(){
    	$("#showCell").hide();
    }
    function showCell(){
    	$("#showCell").show();
    }
	</script>
	<script type="text/javascript">
    jQuery.fn.customInput = function(){
        $(this).each(function(i){
            if($(this).is('[type=checkbox],[type=radio]')){
                var input = $(this);
                //get the associated label using the input's id
                var label = $('label[for='+input.attr('id')+']');
                //get type,for classname suffix
                var inputType = (input.is('[type=checkbox]')) ? 'checkbox' : 'radio';
                //wrap the input + label in a div
                $('<div class="custom-'+ inputType +'"></div>').insertBefore(input).append(input,label);
                //find all inputs in this set using the shared name attribute
                var allInputs = $('input[name='+input.attr('name')+']');
                //necessary for browsers that don't support the :hover pseudo class on labels
                label.hover(function(){
                    $(this).addClass('hover');
                    if(inputType == 'checkbox' && input.is(':checked')) {
                        $(this).addClass('checkedHover');
                    }
                },function(){
                    $(this).removeClass('hover checkedHover');
                });
                
                //bind custom event, trigger it, bind click,focus,blur events
                input.bind('updateState',function(){
                    if(input.is(':checked')){
                        if(input.is(':radio')){
                            allInputs.each(function(){
                                $('label[for='+$(this).attr('id')+']').removeClass('checked');
                            });
                        };
                        label.addClass('checked');
                    } else {
                        label.removeClass('checked checkedHover checkedFocus');
                    }
                })
                .trigger('updateState')
                .click(function(){
                    $(this).trigger('updateState');
                })
                .focus(function(){
                    label.addClass('focus');
                    if(inputType == 'checkbox' && input.is(':checked')) {
                        $(this).addClass('checkedFocus');
                    }
                })
                .blur(function(){
                    label.removeClass('focus checkedFocus');
                });                    
            }
        });
    }
</script>
 <script type="text/javascript">
    $(function(){
        $('input').customInput();
    });
</script>
<!-- 解决ie 6 7 8 9不能显示placeholder的问题 -->
	<script src="${ctx}/js/lib/jquery.JPlaceholder.js"></script>

